@charset "utf-8";
@function v($p){
    @return $p/1920*100vw;
}
@import 'animate.css';

//section 中部
section{
    padding: 0 v(220);
    box-sizing: border-box;
    //顶部大图
    .section_top{
        position: relative;
        margin-bottom: v(58);
        img{width: 100%;}
        //中间的div
        .section_top_title{
            text-align: center;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            >img{width: v(513);}
            a>button{
                color: white;
                border: 1px solid white; 
                background: transparent;
                margin-top: v(48);
                padding: v(23) v(69) v(21);}
        }
    }
    .section_top:hover{cursor: pointer;}
    //
    .section_mid{
        font-size: 0;
        li{
            display: flex;
            justify-content: space-between;
            div{
                width: v(457);
                padding-bottom: v(52);
                img{width:100%;}
            }
            div:nth-child(2){
                padding-left: v(52);
                padding-right: v(52);}
        }
    }

    //LOAD MORE
    .loadMore{
        width: 100%;
        text-align: center;
        margin-top: v(64);
        margin-bottom:v(138) ;
        button{
            border: 1px solid black; 
            background: transparent;
            padding: v(23) v(95) v(21);}
        button:hover{background: black!important;color: white!important;}
    }
    
}
//底部图片
.section_footer{
    background: url(../img/6,12.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: v(816);
    position: relative;
    .section_footer_title>img{
        width:v(531);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(0%,-50%);
        margin: auto;
    }
}

//另一个页面
.web{position: relative;}
#smWeb{
    position: absolute!important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    padding: v(328) v(550) v(261);
    box-sizing: border-box;
    position: relative;
    //返回图标
    .smWeb_topleft{
        width: v(112);
        position: absolute;
        left:  v(340);
        top: v(164);
        display: flex;
        align-items: center;
        .leftsign{width: 32.15%;
            margin-right: v(12);}
        .return{width: 56.25%;}
    }
    .smWeb_topleft:hover{cursor: pointer;}
    //用户区域
    .smWeb_user{
        display: flex;
        align-items: center;
        margin-bottom: v(38);
        div{width: v(83);
            height: v(83);
            border-radius: 50%;
            overflow: hidden;
            margin-right: v(15);
            img{width: 100%;}}
    }
    //图片1
    .smWeb_pic_1st{
        width: 100%;
        img{width: 100%;}
    }
    .smWeb_title{
        margin: v(53) 0 v(25);
        img{width: v(407);}
    }
    //图片2
    .smWeb_pic_2nd{
        width: 100%;
        margin: v(55) 0;
        img{width: 100%;}
    }
    >p{line-height: 20px;
        text-align: justify;}
}

//-----------------动画
.section_top:hover >img{
    animation: jello 1s;
}
.section_mid{
    li{
        div{overflow: hidden;cursor: pointer;}
        div:nth-child(1):hover >img{
                animation:slideInLeft  .9s;}
        div:nth-child(3):hover >img{
                animation:slideInRight  .9s;}
    }
    li:nth-child(1){
        div:nth-child(2):hover >img{
            animation: slideInDown .9s;
        }
    }
    li:nth-child(2){
        div:nth-child(2):hover >img{
            animation: zoomIn 1s;
        }
    }
    li:nth-child(3){
        div:nth-child(2):hover >img{
            animation: slideInUp .9s;
        }
    }
}

